<template>
    <div class="bi-dialog" :class="[cls,header_drag_class,style_class]" :style="style" >
        <div class="dialog-header" v-if="header"  @mousedown="move">
            <div class="dialog-header-title">
             <bi-icon :data="icon" v-if="icon" ></bi-icon>{{title}}
            </div>
            <div class="dialog-header-ctrl">
                <i class="fa fa-close" v-if="closeable" @click="cancel"></i>
            </div>
        </div>

        <div  class="dialog-body" ref="dialogBody">
            <div ref="content" class="dialog-body-content">

            </div>
            <div class="dialog-loading" v-if="loading" >
                <i class="fa fa-spinner fa-spin"></i>
            </div>
        </div>

        <div class="dialog-footer" :class="'button-'+buttonAlign" v-if="buttonList.length>0">
            <bi-button v-for="(item,index) in buttonList"
                
                :key="index"
                :type  = "item.type"
                :icon  = "item.icon"
                :style  = "item.style"
                :loading = "this.loading"
                :disabled = "item.disabled"
                @click = "buttonClick(item.click)"

            >{{item.text}}</bi-button>
        </div>
    </div>
</template>


<script>
import {assign,esc,enter} from '../global.js';
import BiButton from 'button.vue';
import BiIcon from 'icon.vue';
export default {
    name:'admin-dialog',
    components:{
        BiButton,
        BiIcon
    },
    data(){

        let style = {
            width:'500px',
        };

        return {
            title:'',
            icon:'',
            _dom:undefined,
            _maskdom:undefined,
            buttonList:[],
            _okFun:()=>{ return true },
            _cancelFun:()=>{ return true  },
            width:undefined,
            header:true,
            closeable:true,
            object:undefined,
            style,
            loading:false,
            value:undefined,
            cls:'hidden',
            header_drag_class:'',
            style_class:'',
            buttonAlign:'right',
            moveLab:false
        }
    },
    methods:{
        init(config){
            
            let _config = {
                title:'',
                style:'default',
                width:500,
                loading:false,
                type:'html',
                content:'',
                icon:'',
                header:true,
                closeable:true,
                ok:()=>{return true},
                cancel:()=>{return true},
                buttons:[],
                buttonAlign:'right',
                okButton:true,
                cancelButton:false,
                callback:()=>{}
            }
    
            
            /** 从vue配置文件里面读取 */

            if (typeof config.type == "string" && config.type=='vue' ){
                if (typeof config.content =="object" && config.content.hasOwnProperty('_component')){

                    if  (typeof(config.content._component.dialog) == 'object'){

                        let _dialogConfig = config.content._component.dialog;

                        if (typeof _dialogConfig.type !=undefined) delete _dialogConfig.type;
                        if (typeof _dialogConfig.content!=undefined) delete _dialogConfig.content;

                        _config = assign(_config,_dialogConfig);
                    }

                }
            }
            
            config = assign(_config,config);
            
            let okLab = false;
            if (config.buttons.length == 0){
                
                let okConfig = {
                    text:'确定',
                    icon:'',
                    style:'',
                    type:'primary',
                    click:()=>{
                        this.ok()
                    }
                }

                if (typeof config.okButton == "boolean" &&  config.okButton === true ){
                    okLab = true;
                    config.buttons.push(okConfig);
                }

                if (typeof config.okButton == "string"){
                    okLab = true;
                    okConfig.text = config.okButton;
                    config.buttons.push(okConfig);
                }

                if (typeof config.okButton == "object" ){
                    okLab = true;
                    config.buttons.push(assign(okConfig,config.okButton));
                }
                 
                let cancelConfig = {
                    text:'取消',
                    icon:'',
                    style:'',
                    type:'light',
                    click:()=>{
                        this.cancel()
                    }
                }

                if (typeof config.cancelButton == "boolean" &&  config.cancelButton === true ){
                    config.buttons.push(cancelConfig);
                }

                if (typeof config.cancelButton == "string"){
                    cancelConfig.text = config.cancelButton;
                    config.buttons.push(cancelConfig);
                }

                if (typeof config.cancelButton == "object" ){
                    config.buttons.push(assign(cancelConfig,config.cancelButton));
                }

            }

            this._okFun       = config.ok;
            this._cancelFun   = config.cancel; 
            this.buttonList   = config.buttons;
            this.header       = config.header;
            this.closeable    = config.closeable;
            this.title        = config.title;
            this.style_class  = config.style;
            this.icon         = config.icon;
            this.loading      = config.loading;
            this.callback     = config.callback;
            this.buttonAlign  = config.buttonAlign;
            
            esc(()=>{
                if(this.closeable){
                    this.cancel();
                }
            });
        


            enter(()=>{
                if (okLab){
                    this.ok();
                }
            });
             
            //载入
            switch(config.type.toLowerCase()){
                case 'html':
                    this.$refs['content'].innerHTML = config.content;
                    this.object = this.$refs['content'].children;
                break;

                case 'dom':
                    this.$refs['content'].appendChild(config.content);
                    this.object = config.content;
                break;


                case 'iframe':
                    
                break;

                case 'vue':
                 
                    if (config.content.hasOwnProperty('mount')){
                        
                       config.content.config.globalProperties.dialog =  this;
                       
                       this.object =  config.content.mount(this.$refs['content']);
                       //console.log(this.object);
                       //this.object.dialog = this;

                       if (Object.hasOwnProperty.call(this.object,'dialogOk')){
                            
                            this._okFun =  this.object.dialogOk;
                       }

                       if (Object.hasOwnProperty.call(this.object,'dialogCancel')){
                            this._cancelFun =  this.object.dialogCancel;
                       }

                       
                    }else{
                        console.log('对话框配置错误,请传入createApp后的Vue对象');
                    }
                
                break;
            }

            this.$nextTick(()=>{
                this.width = config.width;
            });
           //this.setPosition();

        },
        buttonClick(click){
            if (typeof(click)=="function"){
                click(this,this.object);
            }
        },
        ok(){
            if (typeof(this._okFun)=="function" ){
                if (this._okFun(this,this.object,this.value)!==false){
                    this.close();
                }
            }
        },

        cancel(){

            if (typeof(this._cancelFun)=="function" ){
               if ( this._cancelFun(this,this.object,this.value)!==false)  this.close();
            }else{
                this.close();
            }
             
        },
        /**
         * 关闭对话框
         */
        close(){
            
            if (this._dom!==undefined){
                this._dom.remove();
            }
            
        },
        flashSize(){
            this.style.width = (this.width+20)+'px';
            if (!this.moveLab) this.setPosition();
        },
        setPosition(){
            
            this.$nextTick(()=>{
                
                if (this.$el!=undefined){
                
                    let height = this.height;
                    if (this.$refs['dialogBody'].offsetHeight!=undefined && height ==undefined){
                        height = this.$refs['dialogBody'].offsetHeight;
                    }

                    
     
                    this.$el.style.left = (document.body.scrollWidth -this.width-20)/2+'px';
                    this.$el.style.top = (document.body.scrollHeight - height-100)/2+'px';
                }
            });
           
            
            
        },

        move(e){
            let odiv = this.$el;        //获取目标元素
            this.header_drag_class = 'move';
            //算出鼠标相对元素的位置
            let disX = e.clientX - odiv.offsetLeft;
            let disY = e.clientY - odiv.offsetTop;
            document.onmousemove = (e)=>{       //鼠标按下并移动的事件
                //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
                let left = e.clientX - disX;    
                let top = e.clientY - disY;
                odiv.style.left = left+'px';
                odiv.style.top = top+'px';
                this.moveLab = true;
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null; 
                this.header_drag_class = '';
            };
        },

        show(){
            /*
            if (this.height =='auto'){ 
                this.height = this.$refs.body.offsetHeight;
            }
            */
            //延迟显示，防抖
            setTimeout(()=>{
            //    this.setPosition();
                this.cls = "show";
            },  100);
        },
        callback(){
            return false;
        }
    },
    watch: {
        width(){
            this.flashSize(); 
        },
        height(){
            this.flashSize();
        }
    }
}
</script>




<style>

.bi-dialog-wrapper{
    left:0px;
    top:0px;
    width: 100vw;
    height: 100vh;
    position:absolute;
}

.bi-dialog-wrapper.mask{
    background-color: rgba(0, 0, 0, .2);
}


.bi-dialog{
    position: absolute;
    top: 100px;
    left: 100px;
    background-color:rgba(255, 255, 255);
    box-shadow: 0 .25rem .75rem rgba(0,0,0,.1);
    transition: transform 0.3s,opacity 0.3s;
    padding-bottom: 5px;
    border-radius: var(--bs-border-radius);
}

.bi-dialog.hidden{
    visibility: hidden;
    transform: translateY(20px);
    opacity: 0.8;
}


.bi-dialog.show{
    visibility:visible;
    transform: translateY(0px);
    opacity: 1;
}

.bi-dialog.move .dialog-header{
    cursor: move;
}




.bi-dialog .dialog-header,
.bi-dialog .dialog-footer{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    height: 40px;
    user-select: none;
    align-items: center;
    padding-left:0.45rem;
    padding-right:0.45rem;
}



.bi-dialog .dialog-header{
   height: 40px;
}



.bi-dialog .dialog-header .dialog-header-title{
    flex-shrink: 1;
    color: #36425a;
    font-weight: bold;
    font-size: 14px;
    line-height: 30;
    display: flex;
    align-items: center;
}

.bi-dialog .dialog-header .dialog-header-title .bi-icon{
    margin-right: 5px;
}



.bi-dialog .dialog-header .dialog-header-ctrl{
    display: flex;
}

.bi-dialog .dialog-header .dialog-header-ctrl i{
    cursor: pointer;
}

.bi-dialog .dialog-header .dialog-header-ctrl i.fa-close{
    color: red;
    opacity: 0.8;
    padding: 5px;
}

.bi-dialog .dialog-header .dialog-header-ctrl i.fa-close:hover{
    opacity: 1;
}

.bi-dialog .dialog-body{
    padding-left: 15px;
    padding-right: 15px;
    padding-top: 5px;
    padding-bottom: 5px;
    background-color: #FFFFFF;
    position: relative;
    margin-bottom: 5px;
}


.bi-dialog .dialog-body .dialog-loading{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:rgba(255,255,255,.8);
    top: 0px;
    left: 0px;
    z-index: 2;
    display: flex;
    justify-content: center;
    align-items: center;
    
}
 
.bi-dialog .dialog-body .dialog-loading i{
    font-size: 20px;
}
.bi-dialog.move .dialog-body{
    pointer-events: none;
}

.bi-dialog.move .dialog-body .dialog-body-content{
    position: relative;
    z-index: 1;
}

.bi-dialog .dialog-footer {
     display: flex;
}

.bi-dialog .dialog-footer  .btn{
    height: 30px;
    line-height: 1em;
    font-size: 0.75rem;
    min-width: 60px;
}

.bi-dialog .dialog-footer.button-left{
    justify-content: flex-start;
}

.bi-dialog .dialog-footer.button-right{
    justify-content: flex-end;
}

.bi-dialog .dialog-footer.button-center{
    justify-content: center;
}

.bi-dialog .dialog-footer .btn + .btn{
    margin-left: 5px;
}



.bi-dialog.primary .dialog-header{
    height: 50px;
}

.bi-dialog.primary .dialog-header .dialog-header-title{
    font-size: 18px;
    line-height: 40px;
    padding-left: 10px;
}

.bi-dialog.primary .dialog-header .dialog-header-title i{
  font-size: 22px;
}

.bi-dialog.alert{
    padding: 0;
}
.bi-dialog.alert .dialog-footer {
    margin-bottom: 10px;
}

.bi-dialog.alert .dialog-footer  .btn{
   min-width: 140px;
}


</style>